{% extends 'base.html' %}

{% block title %}
    Home |
{% endblock title %}

{% block additional_css %}
{% endblock additional_css %}

{% block content %}
<div class="px-[2vw]"
    x-data="note">
    <span class="flex flex-wrap mb-5 justify-between items-center">
        <h2 class="font-bold text-[--text-minor] text-2xl md:order-1 w-1/3 md:w-auto">Your Notes</h2>
        <span class="flex order-4 w-3/4 md:w-2/4 md:order-2">
            <!-- <button
                x-on:click=""
                class="w-auto flex justify-center sm:ml-3 mt-2 sm:mt-0 p-4 rounded-lg bg-[--secondary] hover:cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                </svg>                   
            </button> -->
            <input type="text" name="search" id="search" placeholder="Type to search..." x-model="searchQuery"
                class="w-full flex justify-center md:mt-0 p-3 rounded-lg rounded-r-none bg-[--background-secondary] hover:cursor-pointer focus-visible:outline-none"
                hx-get="{% url 'home_view' %}"
                hx-trigger="keyup changed delay:500ms"
                hx-target="#notes-container"
                hx-select="#notes-container"
                hx-include="[name='search']"
                hx-select-oob="#notes-total,#pagination"
                hx-swap="outerHTML"
                hx-indicator="#indicator"
                hx-push-url="true"
                >
            <!-- <img id="indicator" class="w-auto flex justify-center p-4 rounded-lg rounded-l-none bg-[--secondary]" src="/spinner.gif"/> -->
            <span class="w-auto flex justify-center md:mt-0 p-4 rounded-lg rounded-l-none bg-[--background-secondary]">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 htmx-indicator animate-spin stroke-[--accent]" id="indicator">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                </svg>
            </span>
        </span>
        <span class="flex justify-center order-2 md:order-3 p-3 w-2/3 md:w-1/4">
            <label class="relative inline-flex items-center cursor-pointer mt-1.5">
                <!-- <span class="ml-3 text-sm font-medium text-[--text-minor] peer-checked:text-[--text]">Show all</span> -->
                <input type="checkbox" class="sr-only peer" name="uncompleted"
                    hx-get="{% url 'home_view' %}"
                    hx-trigger="click"
                    hx-target="#notes-container"
                    hx-select="#notes-container"
                    hx-select-oob="#notes-total,#pagination"
                    hx-swap="outerHTML"
                    hx-indicator="#indicator"
                    hx-push-url="true"
                    x-bind:checked="uncompleted==='on' ? true : false"
                    >
                <div 
                    x-bind:class="darkTheme ? 'after:bg-white border after:border-white' : 'after:bg-[--secondary]'" 
                    class="w-11 h-6 bg-[--background-secondary] rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] peer-checked:after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[--accent] peer-checked:border-[--accent]"></div>
                <span before="Show All" class="ml-3 text-sm font-medium text-[--text-minor] peer-checked:text-[--text] before:content-['Show_All'] peer-checked:before:content-['Show_Uncompleted']"></span>
            </label>
        </span>
        <span class=" p-3 rounded-lg order-3 md:order-4 w-1/4 md:w-fit">
            <p id="notes-total" class="text-md md:text-2xl text-[--text-minor]">Total: <strong class="text-[--text-secondary] font-semibold">{{ notes.paginator.count }}</strong></p>
        </span>
    </span>
    <div x-cloak x-show="multipleSelectActive" class="bg-[--background-secondary] flex mb-5 p-3 rounded-lg justify-between sm:items-center">
        <input type="hidden" name="selected-notes-ids" x-model="selectedNotesIds">
        <input type="hidden" name="bulk-notes-action" value="bulk_delete">
        <div class="flex flex-col sm:flex-row justify-between sm:items-center">
            <span class="flex">
                <input
                    x-on:click="selectAllNotes"
                    x-model="allSelected"
                    type="checkbox"
                    name="select_all"
                    id="select_all">
                <label for="select_all" class="ml-2 text-xl font-semibold">Select All</label>
            </span>
            <span class="sm:ml-10 text-[--text-minor]">Selected: <strong x-text="selectedTotal" class="font-extrabold text-[--text-secondary]"></strong></span>
        </div>
        <span class="flex flex-col sm:flex-row">
            <button 
                hx-post="{% url 'bulk_notes_view' %}"
                hx-target="#notes-container"
                hx-select="#notes-container"
                hx-select-oob="#pagination"
                hx-include="[name='selected-notes-ids']"
                hx-swap="outerHTML"
                hx-push-url="true"
                x-on:click="multipleSelectActive = false; $nextTick(() => {selectAllNotes(reset=true)})"
                class="w-auto flex justify-center p-4 rounded-lg bg-[--primary] text-[--text-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                Change Status
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </button>
            <button 
                hx-post="{% url 'bulk_notes_view' %}"
                hx-target="#notes-container"
                hx-select="#notes-container"
                hx-include="[name='selected-notes-ids'], [name='bulk-notes-action']"
                hx-select-oob="#notes-total,#pagination"
                hx-swap="outerHTML"
                hx-push-url="true"
                x-on:click="multipleSelectActive = false; $nextTick(() => {selectAllNotes(reset=true)})"
                class="w-auto flex justify-center sm:ml-3 mt-2 sm:mt-0 p-4 rounded-lg bg-red-900 text-[--text-light] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                Delete Selected
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                </svg>
            </button>
            <button
                x-on:click="selectAllNotes(reset=true)"
                class="w-auto flex justify-center sm:ml-3 mt-2 sm:mt-0 p-4 rounded-lg bg-[--secondary] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>                  
            </button>
        </span>

    </div>
    <div id="notes-container" class="notes-block grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 mb-5">
        <a class="flex justify-center flex-col p-6 rounded-lg bg-[--primary] text-[--text-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer"
                type="button"
                x-on:click="addNote"
                >
                <h5 class="flex mb-2 text-2xl font-bold tracking-tight text-[--text-dark] justify-center items-center">
                    New Note
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>                      
                </h5>
                
            </a>
        {% for note in notes %}
            <a class="flex flex-col p-4 group rounded-lg bg-[--secondary] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer"
                type="button"
                id="note{{note.id}}"
                data-note-id="{{note.id}}"
                x-on:click="setNote"
                >
                <span class="flex justify-between">
                    <h5 data-note-title="{{note.title}}" class="mb-2 text-2xl font-bold tracking-tight ">{{ note.title }}</h5>
                    <input name="selectNote"
                        id="select{{note.id}}"
                        data-note-id="{{note.id}}"
                        x-on:click.stop="multipleSelectActivate"
                        class="self-start opacity-0 group-hover:opacity-100 checked:opacity-100" type="checkbox">
                </span>
                <span class="flex flex-col h-full justify-between">
                    <p data-note-content="{{note.content}}" class="font-normal text-[--text-secondary]">{{ note.content|truncatechars:100 }}</p>
                    <span class="flex justify-between">
                        <!-- <p data-note-created-at="" class="hidden">{{ note.created_at }}</p> -->
                        <p {% if note.completed_at %}data-note-completed="true"{% else %}data-note-completed="false"{% endif %} data-note-created-at="{{note.created_at}}" data-note-updated-at="{{note.updated_at}}" class="font-normal text-xs text-[--text-minor]">Updated: {{ note.updated_at }}</p>
                        {% if note.completed_at %}
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-green-700">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>  
                        {% else %}
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-red-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>  
                        {% endif %}
                    </span>
                </span>
            </a>
        {% endfor %}
    </div>

    <div id="pagination">
        {% if notes.has_other_pages %}
            <nav aria-label="Notes navigation" class="flex">
                <ul class="flex flex-wrap justify-center space-x-2 mx-auto p-2 w-fit rounded-lg bg-[--background-secondary]">
                    {% if notes.has_previous %}
                        <li class="w-auto flex justify-center py-2 px-4 rounded-lg bg-[--secondary] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer hover:bg-[--secondary-dark]"
                            {% if search %}
                                hx-get="?search={{ search }}&page={{ notes.previous_page_number }}"
                            {% elif uncompleted %}
                                hx-get="?uncompleted=on&page={{ notes.previous_page_number }}"
                            {% else %}
                                hx-get="?page={{ notes.previous_page_number }}"
                            {% endif %}
                            hx-target="#notes-container"
                            hx-select="#notes-container"
                            hx-select-oob="#pagination"
                            hx-swap="outerHTML show:#header:top"
                            hx-push-url="true"
                            hx-indicator="#indicator"
                            >
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                            </svg>                              
                        </li>
                    {% else %}
                        <li class="w-auto flex justify-center py-2 px-4 rounded-lg text-[--text-minor] hover:cursor-default">
                            <span class="">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                                </svg>  
                            </span>
                        </li>
                    {% endif %}
                    {% for i in page_range|default_if_none:notes.paginator.get_elided_page_range %}
                        {% if i == notes.paginator.ELLIPSIS %}
                            <li class="w-auto flex justify-center py-2 px-4 rounded-lg text-[--text-minor] hover:cursor-default" aria-current="page">
                                <span class="">{{ i }}</span>
                            </li>
                        {% else %}
                            {% if notes.number == i %}
                                <li class="w-auto flex justify-center py-2 px-4 rounded-lg text-[--text-minor] hover:cursor-default" aria-current="page">
                                    <span class="">{{ i }}</span>
                                </li>
                            {% else %}
                                <li class="w-auto flex justify-center py-2 px-4 rounded-lg bg-[--secondary] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer hover:bg-[--secondary-dark]"
                                    {% if search %}
                                        hx-get="?search={{ search }}&page={{ i }}"
                                    {% elif uncompleted %}
                                        hx-get="?uncompleted=on&page={{ i }}"
                                    {% else %}
                                        hx-get="?page={{ i }}"
                                    {% endif %}
                                    hx-target="#notes-container"
                                    hx-select="#notes-container"
                                    hx-select-oob="#pagination"
                                    hx-swap="outerHTML show:#header:top"
                                    hx-push-url="true"
                                    hx-indicator="#indicator"
                                    >
                                    {{ i }}
                                </li>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    {% if notes.has_next %}
                        <li class="w-auto flex justify-center py-2 px-4 rounded-lg bg-[--secondary] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer hover:bg-[--secondary-dark]"
                            {% if search %}
                                hx-get="?search={{ search }}&page={{ notes.next_page_number }}"
                            {% elif uncompleted %}
                                hx-get="?uncompleted=on&page={{ notes.next_page_number }}"
                            {% else %}
                                hx-get="?page={{ notes.next_page_number }}"
                            {% endif %}
                            hx-target="#notes-container"
                            hx-select="#notes-container"
                            hx-select-oob="#pagination"
                            hx-swap="outerHTML show:#header:top"
                            hx-push-url="true"
                            hx-indicator="#indicator"
                            >
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                            </svg>  
                        </li>
                    {% else %}
                        <li class="w-auto flex justify-center sm:ml-3 py-2 px-4 rounded-lg text-[--text-minor] hover:cursor-default">
                            <span class="">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                                </svg>  
                            </span>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    </div>

    <!-- modals -->
    <!-- note modal -->
    <div x-cloak x-show="noteModalShow" x-transition id="note-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full justify-center items-center flex">
        <div class="relative w-full max-w-2xl max-h-full">
            <!-- Modal content -->
            <div id="note-body" x-on:click.outside="noteModalShow = false" class="relative bg-[--background-secondary] z-50 rounded-lg shadow">
                <button x-on:click="noteModalShow = false" type="button" class="absolute top-3 right-2.5 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center bg-[--secondary] hover:bg-[--secondary-dark] hover:cursor-pointer dark:hover:text-white" data-modal-hide="note-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
                <div class="px-6 py-6 lg:px-8">
                    <h3 x-text="modalTitle" class="mb-4 text-xl font-medium "></h3>
                    <form id="note-form"
                        class="space-y-6"
                        >

                        <input type="hidden" name="note_id" x-model="id">
                        <input type="hidden" name="note_action" x-model="noteAction">

                        <div>
                            <label for="title" class="block mb-2 text-sm font-medium ">Title</label>
                            <input x-model="title"
                                type="text"
                                name="title"
                                id="title" 
                                class="text-sm rounded-lg block w-full p-2.5 bg-[--background] placeholder-gray-600 border-[--secondary] border-2" placeholder="Your note text..." required>
                                <div class="invalid-feedback">
                                    Please input a title.
                                </div>
                        </div>
                        <div>
                            <label for="content" class="block mb-2 text-sm font-medium ">Content</label>
                            <textarea x-model="content" placeholder="Your note content..." name="content" id="contetn" cols="30" rows="10" class="w-full rounded-lg resize-none p-2.5 bg-[--background] placeholder-gray-600 border-[--secondary] border-2" required></textarea>
                            <div class="invalid-feedback">
                                Please input a content.
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <div class="flex items-center px-2">
                                    <input id="completed" type="checkbox" name="completed" x-model="completed" class="w-4 h-4">
                                    <label for="completed" class="w-full py-4 ml-2 text-sm font-medium ">Mark as Completed</label>
                                </div>
                                <!-- <input id="completed" name="completed" type="checkbox" x-model="completed" class="appearance-none w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-600 dark:border-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"> -->
                            </div>
                            <!-- <label for="completed" class="ml-2 text-sm font-medium">Mark as Completed</label> -->
                        </div>
                        <div x-show="noteAction === 'update'" class="flex justify-between space-x-2">
                            <p class="font-light text-sm">Created: <span x-text="createdAt"></span></p>
                            <p class="font-light text-sm">Updated: <span x-text="updatedAt"></span></p>
                        </div>
                        <div class="flex justify-between space-x-2">
                            <button x-on:click="noteModalShow = false"
                                type="button"
                                class="w-full p-4 rounded-lg bg-[--secondary] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">Cancel</button>
                            <button x-show="noteAction === 'update'" x-on:click="confirmModalShow = true;noteModalShow = false"
                                type="button" 
                                class="w-16 flex justify-center sm:ml-3 mt-2 sm:mt-0 p-4 rounded-lg bg-red-900 text-[--text-light] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                </svg>
                            </button>
                            <button name="update" type="button" class="w-full p-4 rounded-lg bg-[--primary] text-[--text-dark] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer"
                                hx-post="{% url 'note_view' %}"
                                hx-target="#notes-container"
                                hx-select="#notes-container"
                                hx-select-oob="#notes-total,#pagination"
                                hx-swap="outerHTML"
                                x-on:click="noteModalShow = false"
                                >Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end of note modal -->
    <!-- confirm modal -->
    <div x-cloak x-show="confirmModalShow" x-transition id="popup-modal" tabindex="-1" class="fixed top-0 left-0 right-0 z-50 p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full justify-center items-center flex">
        <div class="relative w-full max-w-md max-h-full">
            <div class="relative bg-[--background-secondary] rounded-lg shadow">
                <button type="button"
                    x-on:click="confirmModalShow = false; noteModalShow = true"
                    class="absolute top-3 right-2.5 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center bg-[--secondary] hover:bg-[--secondary-dark] hover:cursor-pointer dark:hover:text-white">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
                <div class="p-6 text-center">
                    <div class="p-2 inline-flex items-center justify-center flex-shrink-0 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
                        <svg class="w-10 h-10" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
                        </svg>
                      <span class="sr-only">Check icon</span>
                    </div>
                    <h3 class="mb-5 text-lg font-normal">Are you sure you want to delete this Note?</h3>
                    <input type="hidden" name="note_id" x-model="id">
                    <span class="flex space-x-4">
                        <button id="note_delete_btn" type="button"
                            hx-delete="/"
                            hx-on::config-request="event.detail.path = `note/${this.closest('[x-data]')._x_dataStack[0].id}/`"
                            hx-trigger="click delay:100ms"
                            hx-target="#notes-container"
                            hx-select="#notes-container"
                            hx-select-oob="#notes-total,#pagination"
                            hx-swap="outerHTML"
                            hx-push-url="true"
                            x-on:click="confirmModalShow = false;searchQuery = ''"
                            class="w-full flex justify-center sm:ml-3 mt-2 sm:mt-0 p-4 rounded-lg bg-red-900 text-[--text-light] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                            Yes, I'm sure
                        </button>
                        <button type="button"
                            x-on:click="confirmModalShow = false; noteModalShow = true"
                            class="w-full p-4 rounded-lg bg-[--secondary] hover:origin-top hover:translate-y-[-3px] transition transform duration-200 ease-in-out hover:cursor-pointer">
                            No, cancel
                        </button>
                    </span>
                    
                </div>
            </div>
        </div>
    </div>
    <!-- end of confirm modal -->
    <template x-if="noteModalShow">
        <div id="modalBackdrop" x-on:click="noteModalShow = false" modal-backdrop="" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"></div>
    </template>
    <template x-if="confirmModalShow">
        <div id="modalBackdrop" x-on:click="noteModalShow = false" modal-backdrop="" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"></div>
    </template>
    <!-- end of modals -->
</div>

{% endblock content %}

{% block additional_javascript %}
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('note', () => ({
            id: 0,
            title: '',
            content: '',
            completed: false,
            createdAt: '',
            updatedAt: '',

            searchQuery: new URLSearchParams(window.location.search).get('search'),
            uncompleted: new URLSearchParams(window.location.search).get('uncompleted'),

            noteModalShow: false,
            noteAction: 'update',
            modalTitle: 'Create New Note',
            confirmModalShow: false,

            multipleSelectActive: false,
            selectedTotal: 0,
            allSelected: false,
            selectedNotesIds: new Array(),

            setNote(event) {
                let closestLinkElem = event.target.closest('a');
                this.id = closestLinkElem.dataset.noteId;
                this.title = closestLinkElem.querySelector('[data-note-title]').dataset.noteTitle;
                this.content = closestLinkElem.querySelector('[data-note-content]').dataset.noteContent;
                if (closestLinkElem.querySelector('[data-note-completed]').dataset.noteCompleted === 'true') {
                    this.completed = true;
                } else if (closestLinkElem.querySelector('[data-note-completed]').dataset.noteCompleted === 'false') {
                    this.completed = false;
                }
                this.createdAt = closestLinkElem.querySelector('[data-note-created-at]').dataset.noteCreatedAt;
                this.updatedAt = closestLinkElem.querySelector('[data-note-updated-at]').dataset.noteUpdatedAt;
                this.noteModalShow = true;
                this.noteAction = 'update';
                this.modalTitle = 'Edit Note'
            },

            addNote() {
                this.noteModalShow = true;
                this.noteAction = 'create';
                this.modalTitle = 'Create New Note';
                
                this.id = 0;
                this.title = '';
                this.content = '';
                this.completed = false;
                this.createdAt = '';
                this.updatedAt = '';
            },
            multipleSelectActivate(event) {
                let selectCheckboxesChecked = document.querySelectorAll('[name="selectNote"]:checked');
                let selectCheckboxes = document.querySelectorAll('[name="selectNote"]');
                this.selectedTotal = selectCheckboxesChecked.length;
                if (selectCheckboxesChecked.length > 0) {
                    this.multipleSelectActive = true;
                } else {
                    this.multipleSelectActive = false;
                }
                if (selectCheckboxesChecked.length < selectCheckboxes.length) {
                    this.allSelected = false;
                } else {
                    this.allSelected = true;
                }
                console.log(event.target.checked);
                if (event.target.checked) {
                    if (this.selectedNotesIds.includes(event.target.dataset.noteId) === false) {
                        this.selectedNotesIds.push(event.target.dataset.noteId);
                    }
                } else {
                    this.selectedNotesIds.pop(event.target.dataset.noteId);
                }
                console.log(JSON.stringify(this.selectedNotesIds));
            },
            selectAllNotes(reset=false) {
                let selectCheckboxes = document.querySelectorAll('[name="selectNote"]');
                if(reset === true) {
                    this.multipleSelectActive = false;
                    this.selectedTotal = 0;
                    this.allSelected = false;
                    this.selectedNotesIds = [];
                    selectCheckboxes.forEach((elem) => {
                        elem.checked = false;
                    })
                    return;
                }
                if (this.allSelected) {
                    selectCheckboxes.forEach((elem) => {
                        elem.checked = false;
                        this.selectedNotesIds = [];
                    })
                    this.selectedTotal = 0;
                } else {
                    selectCheckboxes.forEach((elem) => {
                        elem.checked = true;
                        if (this.selectedNotesIds.includes(elem.dataset.noteId) === false) {
                            this.selectedNotesIds.push(elem.dataset.noteId);
                        }
                    })
                    this.selectedTotal = selectCheckboxes.length;
                }
                console.log(JSON.stringify(this.selectedNotesIds));
            }
        }))
    })
    
</script>
<script>
    // configure htmx requests
    document.body.addEventListener('htmx:configRequest', function(evt) {
        // dunamically update a path for Note delete request
        if (evt.detail.elt.id === 'note_delete_btn') {
            evt.detail.path = `note/${evt.target.closest('[x-data]')._x_dataStack[0].id}/`;
        }
    });

</script>

{% endblock additional_javascript %}